<template>
  <Wrapper>
    <el-card shadow="never">
      <el-select
        v-model="tag"
        style="margin-bottom: 22px; width: 300px;"
        placeholder="选择标签类型"
      >
        <el-option
          label="canvas"
          value="canvas"
        />
        <el-option
          label="svg"
          value="svg"
        />
        <el-option
          label="img"
          value="img"
        />
      </el-select>
      <el-row :gutter="10">
        <el-col
          v-for="item in barcodes"
          :key="item.text"
          :lg="8"
          :xs="24"
          :sm="24"
          :md="12"
          :xl="8"
        >
          <bar-code
            :text="item.text"
            :type="item.type"
            :options="item.options"
          />
        </el-col>
      </el-row>
    </el-card>
  </Wrapper>
</template>

<script setup>
import BarCode from '@/components/barcode'

const tag = ref('canvas')
const barcodes = [
  {
    text: 'CODE128',
    type: 'CODE128',
  },
  {
    text: 'CODE39',
    type: 'CODE39',
    options: {
      lineColor: '#990000',
    },
  },
  {
    text: '123456',
    type: 'pharmacode',
    options: {
      background: '#eee',
      width: 5,
    },
  },
]


</script>
